<template>
  <div class="home">
    <!-- 头部 -->
    <van-nav-bar title="课程详情" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <van-icon
          :name="info.is_collect ? 'star' : 'star-o'"
          size="25"
          @click="SCc"
        />
        <van-icon name="share-o" size="25" @click="getSOUCANGt" />
      </template>
    </van-nav-bar>
    <!-- 轮播 -->
    <div class="lun">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in allList.banner" :key="index">
          <img
            :src="item.banner_src"
            class="lunimg"
            alt=""
            v-show="item.type == 1"
          />
          <video
            :src="item.banner_src"
            class="lunimg"
            controls
            autoplay
            v-show="item.type == 2"
          ></video>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 标题区域 -->
    <div class="bt">
      <div class="btt">{{ info.title }}</div>
      <div class="bbtc">共{{ info.course_count }}个课时 | 直播课</div>
      <div class="bbtcb">
        限{{ info.stock_num }}人 已报名{{ info.sales_num }}人
      </div>
      <div class="ter">
        <div
          class="ter1"
          v-for="(item, index) in teacher.slice(0, 3)"
          :key="index"
        >
          <img
            :src="item.avatar"
            alt=""
            class="terimg"
            @click="goteacher(item.teacher_id)"
          />
          {{ item.teacher_name }}
        </div>
      </div>
    </div>
    <!-- 色块 -->
    <div class="se"></div>
    <!-- 课前准备 -->
    <div class="kq">
      <div class="kqt">课前准备</div>
      <div class="kqb">
        <div class="l">添加助教,进学习群领高分资料</div>
        <div class="r">联系方式</div>
      </div>
    </div>
    <!-- 色块 -->
    <div class="se"></div>
    <!-- tab栏 -->
    <van-tabs v-model:active="active" line-width="25%">
      <van-tab title="课程详情">
        <div v-html="course_details" class="img"></div>
      </van-tab>
      <van-tab title="课程安排">
        <div class="top">
          <button
            @click="btnChange(index)"
            :class="{ activev: index == btnIndex }"
            v-for="(item, index) in buttonArr"
            :key="index"
          >
            {{ item }}
          </button>
        </div>
        <div class="count">
          <van-collapse v-model="activeNames">
            <van-collapse-item
              v-for="item in allList.list"
              :key="item.id"
              :title="item.title"
              name="1"
            >
              <p v-for="it in item.child" :key="it.id">
                {{ it.periods_title }}
              </p>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper">
        <div class="block">
          <div class="t">
            <div class="l"></div>
            <div class="l">二维码</div>
            <div class="l">x</div>
          </div>
          <div class="b">
            <img :src="erWM" alt="" class="img55" />
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getShouYeXQApi,
  getShouYeXQPJApi,
  getcollecttttApi,
  getcollecterweimaApi,
  getcourseInfoApi
} from '../http/api.js'
import { useCounterStore } from '@/stores/counter'
// 引入qrcode 二维码生成器
import QRCode from 'qrcode'
export default {
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const store = useCounterStore()
    const data = reactive({
      allList: [], //所有的数据
      info: [],
      teacher: [],
      active: 0,
      course_details: '',
      pjList: [],
      isShow: false,
      erWM: '',
      show: false,
      buttonArr: ['章节分类', '时间排序'],
      btnIndex: 0,
      activev: 0,
      activeNames: ['1']
    })
    onMounted(() => {
      console.log('详情传递过来的参数id', route.query.id)
      getXqList()
      pj()
    })
    const getXqList = async () => {
      const res = await getShouYeXQApi(route.query.id)
      console.log('详情渲染的数据', res, res.info.is_collect)
      data.allList = res
      data.info = res.info
      data.teacher = data.info.teacher
      data.course_details = res.info.course_details.replace(
        /img/g,
        'img style="width:100%;height:atto;"'
      )
    }
    const pj = async () => {
      const res = await getShouYeXQPJApi(route.query.id)
      console.log('商品评价', res)
      data.pjList = res.list
    }
    // 跳转到详情老师的函数
    const goteacher = (id) => {
      router.push('/teacherD?id=' + id)
    }
    // 点击收藏
    const SCc = async () => {
      let token = store.res.remember_token
      if (!token) {
        router.push('/login')
      } else {
        data.isShow = !data.isShow
        let obj = {
          basis_id: route.query.id,
          type: 1
        }
        const res = await getcollecttttApi(obj)
        console.log('收藏的数据', res)
        data.info.is_collect = res.is_collect
      }
    }
    // 分享二维码
    const getSOUCANGt = () => {
      //获取当前url
      data.show = true
      const url = location.href
      //根据上面的url生成base64二维码字符串，url为base64字符串
      QRCode.toDataURL(url, (err, url) => {
        //将base64二维码字符串赋值给imgURL
        console.log(url)
        data.erWM = url
      })
    }
    // 课程安排
    const btnChange = (i) => {
      data.btnIndex = i
    }
    return {
      ...toRefs(data),
      goteacher,
      SCc,
      btnChange,
      store,
      getSOUCANGt
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 50px;
  .lun {
    width: 100%;
    box-sizing: border-box;
    height: 300px;
    .my-swipe {
      width: 100%;
      height: 100%;
    }
    .lunimg {
      width: 100%;
      height: 100%;
    }
  }
  .bt {
    width: 100%;
    box-sizing: border-box;
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 13px;
    .btt {
      font-weight: bolder;
      font-size: 17px;
    }
    .bbtc {
      color: #666;
      margin: 10px 0;
    }
    .bbtcb {
      color: #666;
      margin: 10px 0;
    }
    .ter {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 15px;
      .ter1 {
        width: 23.3%;
        color: #666;
        .terimg {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          vertical-align: middle;
        }
      }
    }
  }
  .se {
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
  }
  .kq {
    width: 100%;
    box-sizing: border-box;
    padding: 25px;
    .kqt {
      font-size: 18px;
    }
    .kqb {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      margin-top: 35px;
      font-size: 14px;
      color: #666;
      .r {
        padding: 10px 18px;
        background-color: orange;
        color: #fff;
        text-align: center;
        border-radius: 35px;
        font-size: 15px;
      }
    }
  }
  .van-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .pj {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 25px;
    .l {
      width: 18%;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: 70px;
      }
    }
    .r {
      width: 80%;
      font-size: 13px;
      color: #666;
      text-align: left;
      .rx {
        margin-top: 15px;
        margin-bottom: 15px;
      }
      .rs {
        margin-top: 15px;
        margin-bottom: 15px;
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    .block {
      width: 80%;
      height: 620px;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .t {
        width: 100%;
        height: 100px;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
      }
      .b {
        width: 100%;
        height: 100%;
        .img55 {
          width: 80%;
          height: 80%;
          margin-left: 55px;
        }
      }
    }
  }
  .top {
    display: flex;
    justify-content: space-around;
    padding: 20px 0 20px 0;
    button {
      font-size: 15px;
      padding: 10px 26px;
      border-radius: 26px;
      border: 1px solid #ccc;
      background-color: #fff;
    }
    .activev {
      border-color: #ef8a1f;
      color: #ef8a1f;
    }
  }
}
</style>
